<template>
	<div class="orderCallLogs">
		<wtop></wtop>
		<div class="center">
			<div class="right">
				<div style="height: 16px; width: 100%; background: #EFEFEF;"></div>
				<div class="powertop">
					<router-link class="powertopli powertopact" to="/callsystem/orderCallLogs">订单外呼</router-link>
					<router-link class="powertopli" to="/callsystem/callLogs">其它</router-link>
				</div>
				<div class="conlist" v-loading='loading'>
					<div class="flex">
						<div class="gong gl">
							<el-form :inline="true" :model="formInline">
								<el-form-item label="任务名称：">
									<el-input v-model="formInline.name" placeholder="任务名称"></el-input>
								</el-form-item>
								<el-form-item label="意向标签：">
									<el-select clearable v-model="formInline.tag" placeholder="请选择">
										<el-option v-for="(item,index) in tagList" :key="index" :label="item.name" :value="item.id">
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="联系电话：">
									<el-input v-model="formInline.mobile" placeholder="联系电话"></el-input>
								</el-form-item>
								<el-form-item label="订单来源：">
									<el-input v-model="formInline.source" placeholder="订单来源"></el-input>
								</el-form-item>
								<el-form-item label="订单状态:">
									<el-select v-model="formInline.status" clearable placeholder="订单状态">
										<el-option label="初步审核" value="120"></el-option>
										<el-option label="待完善证件信息" value="150"></el-option>
										<el-option label="待审核" value="200"></el-option>
										<el-option label="待开卡" value="450"></el-option>
										<el-option label="已领取" value="460"></el-option>
										<el-option label="开卡中" value="470"></el-option>
										<el-option label="待发货" value="500"></el-option>
										<el-option label="已发货" value="550"></el-option>
										<el-option label="已退货" value="-700"></el-option>
										<!-- <el-option label="已激活" value="5000"></el-option> -->
										<el-option label="开卡失败" value="-460"></el-option>
										<el-option label="证件不合格待重传" value="-200"></el-option>
										<el-option label="订单终止" value="0"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="激活状态:">
									<el-select v-model="formInline.active_status" clearable placeholder="激活状态">
										<el-option label="无" value="0">无</el-option>
										<el-option label="已激活" value="100">已激活</el-option>
										<el-option label="激活且充值" value="200">激活且充值</el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="退款状态:">
									<el-select v-model="formInline.refund_status" clearable placeholder="退款状态">
										<el-option label="正常" value="100">正常</el-option>
										<el-option label="退款中" value="200">退款中</el-option>
										<el-option label="退款成功" value="300">退款成功</el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="拨通状态:">
									<el-select v-model="formInline.called_status  " clearable placeholder="拨通状态">
										<el-option label="未拨通" value="1">未拨通</el-option>
										<el-option label="已拨通" value="2">已拨通</el-option>
									</el-select>
								</el-form-item>


									<el-form-item label="商品编码：">
										<el-input v-model="formInline.good_sku" placeholder="商品编码"></el-input>
									</el-form-item>
									<el-form-item label="订单ID：">
										<el-input v-model="formInline.order_id" placeholder="订单ID"></el-input>
									</el-form-item>

									<el-form-item label="外呼人员:" v-if="func_K03">
										<el-select clearable v-model="formInline.userid" placeholder="请选择">
											<el-option v-for="(item,index) in waihuren" :key="index" :label="item.name" :value="item.id">
											</el-option>
										</el-select>
									</el-form-item>

                  <br />
									<!-- <el-button type="text" @click="downloadTask">导出拨打记录</el-button> -->
                 <!-- <el-form-item>
								</el-form-item> -->
                <el-form-item label="订单来源：" style="width: 600px;">
                	<el-date-picker  v-model="times" style="width: 500px;" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" :clearable="false" start-placeholder="开始日期" end-placeholder="结束日期" placeholder="选择日期时间"></el-date-picker>
                </el-form-item>
                <el-button type="danger" @click="search">检索</el-button>
							</el-form>
						</div>
					</div>
					<div class="list">
						<div class="th">订单ID</div>
						<div class="th">联系电话</div>
						<div class="th">所属任务</div>
						<!-- <div class="th">任务类型</div> -->
						<!-- <div class="th">商品编码</div> -->
						<div class="th">意向标签</div>
						<div class="th">拨打次数</div>
						<div class="th">最近一次通话时间</div>
						<!-- <div class="th">初次外呼订单状态</div> -->
						<div class="th">当前订单状态</div>
						<div class="th">外呼人</div>
						<div class="th">外呼目标达成</div>
						<div class="th td2">操作</div>
					</div>
					<div class="list" v-for="(item,index) in list" :key="index">
						<div class="td">{{item.mission_id}}</div>
						<div class="td">{{item.mobile}}</div>
						<div class="td">{{item.task_name}}</div>
						<!-- <div class="td">{{item.type_name}}</div> -->
						<!-- <div class="td">-</div> -->
						<div class="td">{{item.tag_name}}</div>
						<div class="td">{{item.times}}</div>
						<div class="td">{{item.last_call_at}}</div>
						<!-- <div class="td">-</div> -->
						<div class="td">{{item.status_name}}</div>
						<div class="td">{{item.called_name}}</div>
						<div class="td">{{item.result}}</div>
						<div class="td td2">
							<img class="call-icon" src="../../../static/img/waihu_call.png" @click="startCall(item)">
						</div>
					</div>
					<el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="fanye" :page-size="pagesize"
					 :total="total"></el-pagination>
				</div>
			</div>
		</div>
		<el-dialog class="log" title="外呼拨打" :visible.sync="startcall" width="1550px" @close="callclosed" center
		 :close-on-click-modal="false" :close-on-press-escape="false">

     <template slot="title">
       <div class="kflexc">
         <div style="font-size: 20px; margin-right: 50px; color: rgb(97, 97, 97);">外呼拨打</div>
         <div style="font-size: 14px; margin-right: 50px; color: rgb(97, 97, 97);">工号当前：{{shebei.user}}</div>
         <div style="font-size: 14px; margin-right: 50px; color: rgb(6, 175, 0);" v-if="shoujishebie">电话设备已连接</div>
         <div style="font-size: 14px; margin-right: 50px; color: rgb(97, 97, 97);" v-if="!shoujishebie">电话设备未连接</div>

         <div style="font-size: 14px; margin-right: 50px; color: rgb(6, 175, 0);" v-if="dianxinshebie">电信设备已连接</div>
         <div style="font-size: 14px; margin-right: 50px; color: rgb(97, 97, 97);" v-if="!dianxinshebie">电信设备未连接</div>
       </div>
     </template>

			<el-form :model="callform" ref="callform" @submit.native.prevent label-width="110px">
				<div class="formflex">
					<el-form-item label="订单ID：">
						<div class="valwidth">{{callform.mission_id}}</div>
					</el-form-item>
					<div class="lineflex">
						<el-form-item label="订单来源：">
							<div class="valwidth">{{callform.source}}</div>
						</el-form-item>
					</div>
					<div class="lineflex">
						<el-form-item label="外部订单编号：">
							<div class="intention">{{callform.source_id}}</div>
						</el-form-item>
					</div>
          <div style="margin-left: 20px;">
            <el-button type="primary" @click="chuangjiandingdan(callform)" v-if="is_old == 1" plain>创建订单</el-button>
          </div>
				</div>
				<div class="formflex">
					<div class="lineflex">
						<el-form-item label="订单创建时间：">
							<div class="intention">{{callform.created_at}}</div>
						</el-form-item>
					</div>
					<div class="lineflex">
						<el-form-item label="订单状态：">
							<div class="intention">{{callform.status_name}}</div>
						</el-form-item>
					</div>
					<div class="lineflex">
						<el-form-item label="退款状态：">
							<div class="intention">{{callform.refund_name}}</div>
						</el-form-item>
					</div>
					<div class="lineflex">
						<el-form-item label="激活状态：">
							<div class="intention">{{callform.active_name}}</div>
						</el-form-item>
					</div>
				</div>
				<!--              <div class="formflex">
                <el-form-item label="用户姓名：">
                  <div class="">{{callform.address_name}}</div>
                </el-form-item>
              </div> -->
				<div class="formflex">
					<el-form-item label="用户姓名：">
						<div class="">{{callform.address_name}}</div>
					</el-form-item>
					<el-form-item label="收货人姓名：">
						<div class="">{{callform.receive_name}}</div>
					</el-form-item>
					<el-form-item label="身份证：">
						<div class="">{{callform.idCardNum}}</div>
					</el-form-item>
          <el-form-item label="年龄(周岁)：">
            <div class="">{{callform.age}}</div>
          </el-form-item>
				</div>


				<!-- <div class="formflex">
					<el-form-item label="当前拨号：">
						<div class="mobile" v-if="changeM">{{callform.mobile}}</div>
						<el-input ref="mobile" v-if="!changeM" v-model="callform.mobile" clearable></el-input>
					</el-form-item>
          <div class="callbtn kflexcc">
            <div class="kflexcc" @click="call" v-if="keboda" style="height: 38px; border-radius: 20px; min-width: 100px; background: rgb(244, 0, 76); color: #fff; margin-left: 20px; cursor: pointer;">
              <div><img src="../../../static/kuanping/boda.png" style="height: 22px; margin-right: 10px;" /></div>
              <div>拨号</div>
            </div>
            <div class="kflexcc" @click="guaduan" v-if="!keboda && hujiaozhuangtai.status_name != '已挂断'" style="height: 38px; cursor: pointer; border-radius: 20px; min-width: 100px; background: rgb(244, 0, 76); color: #fff; margin-left: 20px; cursor: pointer;">
              <div><img src="../../../static/kuanping/guaduan.png" style="width: 30px; margin-right: 10px;" /></div>
              <div>挂断</div>
            </div>
            <span style="color: rgb(150, 150, 150); margin-left: 20px;" v-if="!hujiaozhuangtai.error" :class="hujiaozhuangtai.status_name=='接听中'?'lvse':''">{{hujiaozhuangtai.status_name}}</span>
            <div  @click="call" style="color: rgb(0, 126, 255); cursor: pointer; margin-left: 20px;" v-if="hujiaozhuangtai.status_name == '已挂断'">再次拨打</div>
            <el-button type="success" style="padding: 14px 20px; margin-left: 20px;" @click="tianjiaqiyehaoyou" v-if="detailx.task.is_add_user == 1">添加为企微好友</el-button>
            <span style="margin-left: 20px;" v-if="jiale">已发送邀请</span>
          </div>
				</div> -->
        <div class="formflex" style="margin-bottom: 10px;">
          <el-form-item label="当前拨号：">
            <div class="mobile" v-if="changeM">{{callform.mobile}}</div>
            <el-input ref="mobile" v-if="!changeM" v-model="callform.mobile" clearable></el-input>
          </el-form-item>
          <div class="callbtn kflexcc">
            <div class="kflexcc" @click="call(callform.mobile,'cloud')" v-if="keboda" style="height: 32px; border-radius: 20px; min-width: 100px; background: rgb(241, 243, 255); border: 1px solid rgb(41, 74, 233); color: rgb(41, 74, 233); margin-left: 20px; cursor: pointer;">

              <div>电信</div>
              <div><img src="../../../static/kuanping/dianxin.png" style="height: 18px; margin-left: 10px; display: block;" /></div>
            </div>
            <div class="kflexcc" @click="call(callform.mobile,'mobile')" v-if="keboda" style="height: 32px; border-radius: 20px; min-width: 100px; background: rgb(255, 233, 237);border: 1px solid rgb(207, 0, 38); color: rgb(207, 0, 38); margin-left: 20px; cursor: pointer;">

              <div>手机</div>
              <div><img src="../../../static/kuanping/shouji.png" style="height: 18px; margin-left: 10px; display: block;" /></div>
            </div>
            <div class="kflexcc" @click="call(callform.mobile,'yidong')" v-if="keboda" style="height: 32px; border-radius: 20px; min-width: 100px; background: #EEF7FF;border: 1px solid rgb(224, 48, 109); color: rgb(224, 48, 109); margin-left: 20px; cursor: pointer;">

              <div>移动</div>
              <div><img src="../../../static/kuanping/yidong.png" style="height: 18px; margin-left: 10px; display: block;" /></div>
            </div>

            <div class="kflexcc" @click="guaduan(callform.mobile)" v-if="!keboda && hujiaozhuangtai.status_name != '已挂断'" style="height: 32px; cursor: pointer; border-radius: 20px; min-width: 100px; background: rgb(244, 0, 76); color: #fff; margin-left: 20px; cursor: pointer;">
              <div><img src="../../../static/kuanping/guaduan.png" style="width: 20px; margin-right: 10px;" /></div>
              <div>挂断</div>
            </div>
            <span style="color: rgb(150, 150, 150); margin-left: 20px;" v-if="!hujiaozhuangtai.error" :class="hujiaozhuangtai.status_name=='接听中'?'lvse':''">{{hujiaozhuangtai.status_name}}</span>
            <div  @click="call(callform.mobile,'zaici')" style="color: rgb(0, 126, 255); cursor: pointer; margin-left: 20px;" v-if="hujiaozhuangtai.status_name == '已挂断'">再次拨打</div>

            <el-button type="primary" v-if="!jiale && detailx.task.is_add_user == 1" round plain style="padding: 0px 20px !important; margin-left: 20px; height: 32px !important; line-height: 32px !important;" @click="tianjiaqiyehaoyou(detailx.task.mobile)" >添加企微好友</el-button>
            <span style="margin-left: 20px;" v-if="jiale && detailx.task.is_add_user == 1">已发送邀请</span>
          </div>
        </div>

        <div class="formflex" style="align-items: center;margin-bottom: 10px;" v-if="detailx.task.is_add_user == 1">
           <el-form-item label="添加企业好友：">
             <el-tooltip class="item" effect="dark"  style="margin-left: 20px;" content="用户微信号不是当前联系电话时，可以输入用户微信手机号添加。" placement="top-start">
             	<i class="el-icon-question" style="color: #409EFF; font-size: 20px; margin-left: 5px; cursor: pointer;" ></i>
             </el-tooltip>
             <span>使用其他号码添加：</span>
             <el-input v-model="xinweixin" size="medium" style="margin-left: 20px; width: 200px;" placeholder="输入号码"></el-input>
             <el-button type="primary" round plain sstyle="padding: 0px 20px !important; margin-left: 20px; height: 32px !important; line-height: 32px !important;" @click="tianjiaqiyehaoyou2(xinweixin,false)" >添加</el-button>
           </el-form-item>
        </div>

        <div class="formflex" style="margin-bottom: 10px;" v-if="callform.plan_mobile_produced">
          <el-form-item label="生产号码：">
            <div class="mobile" v-if="changeM">{{callform.plan_mobile_produced}}</div>
            <el-input ref="mobile" v-if="!changeM" v-model="callform.plan_mobile_produced" clearable></el-input>
          </el-form-item>
          <div class="callbtn kflexcc">
            <!-- <div class="kflexcc" @click="call(callform.plan_mobile_produced)" v-if="keboda" style="height: 32px; border-radius: 20px; min-width: 100px; background: rgb(244, 0, 76); color: #fff; margin-left: 20px; cursor: pointer;">
              <div><img src="../../../static/kuanping/boda.png" style="height: 15px; margin-right: 10px;" /></div>
              <div>拨号</div>
            </div> -->
            <div class="kflexcc" @click="call(callform.plan_mobile_produced,'cloud')" v-if="keboda" style="height: 32px; border-radius: 20px; min-width: 100px; background: rgb(241, 243, 255); border: 1px solid rgb(41, 74, 233); color: rgb(41, 74, 233); margin-left: 20px; cursor: pointer;">
              <div>电信</div>
              <div><img src="../../../static/kuanping/dianxin.png" style="height: 18px; margin-left: 10px; display: block;" /></div>
            </div>
            <div class="kflexcc" @click="call(callform.plan_mobile_produced,'mobile')" v-if="keboda" style="height: 32px; border-radius: 20px; min-width: 100px; background: rgb(255, 233, 237);border: 1px solid rgb(207, 0, 38); color: rgb(207, 0, 38); margin-left: 20px; cursor: pointer;">

              <div>手机</div>
              <div><img src="../../../static/kuanping/shouji.png" style="height: 18px; margin-left: 10px; display: block;" /></div>
            </div>
            <div class="kflexcc" @click="call(callform.plan_mobile_produced,'yidong')" v-if="keboda" style="height: 32px; border-radius: 20px; min-width: 100px; background: #EEF7FF;border: 1px solid rgb(224, 48, 109); color: rgb(224, 48, 109); margin-left: 20px; cursor: pointer;">

              <div>移动</div>
              <div><img src="../../../static/kuanping/yidong.png" style="height: 18px; margin-left: 10px; display: block;" /></div>
            </div>
            <div class="kflexcc" @click="guaduan(callform.plan_mobile_produced,'zaici')" v-if="!keboda && hujiaozhuangtai.status_name != '已挂断'" style="height: 32px; cursor: pointer; border-radius: 20px; min-width: 100px; background: rgb(244, 0, 76); color: #fff; margin-left: 20px; cursor: pointer;">
              <div><img src="../../../static/kuanping/guaduan.png" style="width: 20px; margin-right: 10px;" /></div>
              <div>挂断</div>
            </div>
            <span style="color: rgb(150, 150, 150); margin-left: 20px;" v-if="!hujiaozhuangtai.error" :class="hujiaozhuangtai.status_name=='接听中'?'lvse':''">{{hujiaozhuangtai.status_name}}</span>
            <div  @click="call(callform.plan_mobile_produced)" style="color: rgb(0, 126, 255); cursor: pointer; margin-left: 20px;" v-if="hujiaozhuangtai.status_name == '已挂断'">再次拨打</div>

            <el-button type="primary" v-if="!jiale2 && detailx.task.is_add_user == 1" round plain style="padding: 0px 20px !important; margin-left: 20px; height: 32px !important; line-height: 32px !important;" @click="tianjiaqiyehaoyou2(callform.plan_mobile_produced,true)" >添加企微好友</el-button>
            <span style="margin-left: 20px;" v-if="jiale2 && detailx.task.is_add_user == 1">已发送邀请</span>

          </div>
        </div>

				<div class="formflex">
          <el-form-item label="订单信息：">
            <div class="kflex" style="width: 1300px;">
              <div style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">商品名称：
                <el-tooltip class="item" effect="dark" :content="callform.my_gname" placement="top-start">
                      <span>{{callform.my_gname}}</span>
                </el-tooltip>
              </div>
              <div style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">商品编码：
                <el-tooltip class="item" effect="dark" :content="callform.my_gsku" placement="top-start">
                      <span>{{callform.my_gsku}}</span>
                </el-tooltip>
              </div>
              <div style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">生产号码：
                <el-tooltip class="item" effect="dark" :content="callform.plan_mobile_produced" placement="top-start">
                      <span>{{callform.plan_mobile_produced}}</span>
                </el-tooltip>
              </div>
              <div style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">ICCID：</div>
              <div><el-button type="primary" round plain  @click="xiugaishangpin()">修改商品</el-button></div>
            </div>
          </el-form-item>
					<!-- <el-form-item label="订单信息：">
						<div class="remarkBox">
							<el-form-item label="商品名称：">
								<div class="intention">{{callform.my_gname}}</div>
							</el-form-item>
							<el-form-item label="商品编码：">
								<div class="intention">{{callform.my_gsku}}</div>
							</el-form-item>
							<el-form-item label="生产号码：">
								<div class="intention">{{callform.plan_mobile_produced}}</div>
							</el-form-item>
							<el-form-item label="ICCID：">
								<div class="intention"></div>
							</el-form-item>
						</div>
					</el-form-item> -->
				</div>
				<div class="formflex">
					<el-form-item label="失败原因：">
						<div class="intention">{{callform.reason}}</div>
					</el-form-item>
				</div>
				<!-- <div class="formflex">
                <el-form-item label="产品名：">
                  <div class="intention">{{callform.product}}</div>
                </el-form-item>
              </div>
              <div class="formflex">
                <el-form-item label="地址：">
                  <div class="intention">{{callform.address}}</div>
                </el-form-item>
              </div> -->
				<div class="formflex">
					<el-form-item label="话术要求：">
						<div class="intention">{{callform.demand}}</div>
					</el-form-item>
				</div>
				<div class="formflex col">
					<div style="font-weight: bold;">历史外呼记录：</div>
					<div class="logs">
						<div class="log">
							<div class="ls">
								<div class="list" v-for="(item,index) in logs" :key="index">
									<div style="width: 250px; text-align: left;">{{item.created_at}}</div>
									<div style="width: 250px; text-align: left;" class="status" :class="item.called == '已接通' ? 'sucess' : item.called == '未接通' ? 'error' : ''">是否接通：{{item.called}}</div>
									<div style="width: 250px; text-align: left;" class="time" :class="item.called == '已接通' ? 'sucess' : item.called == '未接通' ? 'error' : ''">时长：{{item.time}}</div>
									<!-- <div class="outperson">外呼人：{{XXXXX}}</div> -->
									<div style="width: 250px; text-align: left;" class="remark">备注：{{item.remark}}</div>
									<div style="flex-grow: 1;" class="audioplay" v-if="item.record">
										<audio class="audio" controls>
									    <source :src="item.record" type="audio/mpeg">
											<!-- <source :src="'/storage/upload/record/'+item.record" type="audio/mpeg"> -->
											您的浏览器不支持 audio 元素。
										</audio>
									</div>
                  <div style="flex-grow: 1;" class="audioplay" v-if="!item.record">
                  	无录音
                  </div>
								</div>
							</div>

						</div>
					</div>
				</div>
				<el-form-item label="设置意向标签：" class="listtag">
					<el-button v-for="(item,index) in tagList" size="mini" :key="index" :type="callform.tag == item.id ? 'danger' : 'info'"
					 @click="wantswitch(item)">{{item.name}}</el-button>
					<el-button type="text" v-if="!showTagValue" size="mini" @click="addTag">+新建标签</el-button>
					<div v-if="showTagValue" style="display: inline-flex;">
						<el-input ref="tagValue" v-model="addTagValue"></el-input>
						<el-button type="primary" @click="saveTagValue" style="margin-left: 10px;">保存</el-button>
					</div>
				</el-form-item>
				<div class="formflex">
					<el-form-item label="修改旗帜：">
						<div class="intention">
							<el-radio-group v-model="flagradio" style="display: flex;">
								<div v-for="item in flaglist" :key="item.id">
									<el-radio :label="item.type">
										<span :style="{color:item.color,fontSize:'30px',marginRight:'20px'}" class="iconfont icon-flag-fill"></span>
									</el-radio>
								</div>
							</el-radio-group>
						</div>
					</el-form-item>
				</div>
				<el-form-item label="拨打备注：" class="listtag">
					<el-input type="textarea" :rows="3" v-model="callform.remark"></el-input>
				</el-form-item>
				<div class="formflex formsubmit">
					<el-button type="danger" @click="noPass">标记未接通</el-button>
					<el-button type="success" @click="sendCalll">标记已接通</el-button>
					<!-- <div class="collection" v-if="collect===1"><i class="el-icon-star-off"></i>添加收藏</div>
                  <div class="collection" v-if="collect===0"><i class="el-icon-star-on"></i>已收藏</div> -->
				</div>
			</el-form>

		</el-dialog>
		<wfoot></wfoot>
    <el-dialog title="手机设备未连接" :visible.sync="logerror" width="1000px" center :close-on-click-modal="false" :close-on-press-escape="false">
      <div>{{cuowu}}</div>
      <span slot="footer" class="dialog-footer">
      	<el-button type="danger" round @click="logerror = false">确定</el-button>
      </span>
    </el-dialog>
    <xiugaishangpin :id="xiugaishangpinid" @xiugaishangpinwan="xiugaishangpinwan" ref="xiugaishangpin"></xiugaishangpin>
    <chuangjiandingdand :all="chuangjiandingdanall" v-if="chuangjiandingdanlog" @chuangjiango="chuangjiango"></chuangjiandingdand>
	</div>

</template>

<script>
  import xiugaishangpin from './zujian/gaishangpin.vue'
  import chuangjiandingdand from './zujian/chuangjiandingdan.vue'
	import axios from 'axios'
	import wtop from '@/components/callsystem/wtop.vue'
	import wfoot from '@/components/callsystem/wfoot.vue'
	import moment from "moment";

	export default {
		components: {
			"wtop": wtop,
			"wfoot": wfoot,
      xiugaishangpin,chuangjiandingdand
		},
		name: "orderCallLogs",
		data() {
			return {
        times:"",
				srclogo: "./static/img/wh_icon1.png",
				setParams: {
					ip: '',
					port: 1818,
					line: 1,
				},
				formInline: {
					userid:"",
					order_id: "",
					good_sku: "",
					name: '',
					source: '',
					mobile: '',
					tag: '',
					status: '',
					active_status: '',
					refund_status: '',
					called_status: ''
				},
				total: 0,
				pagesize: 20,
				page: 1,
				list: [],
				loading: false,
				startcall: false,
				callform: {
					id: '',
					mobile: '',
					tag: 0,
					user_info: '',
					remark: ''
				},
				flagradio: 0,
				noCall: false,
				cancall: false,
				canCall: false,
				nopass: 2, //已接通
				logs: [],
				want_text: '',

				changeM: true, // 修改号码
				remark1: false,
				remark2: false,
				remark3: false,
				tagList: [],
				showTagValue: false,
				addTagValue: '',
				demand: '',
				url: '',

				flaglist: [],
				func_K03: false,
				waihuren:"",

        detailx:{
            detail:"",
            logs:"",
            task:""
          },
          jiale:false,
          ws:"",
          shebei:{
            device_id:"",
            user:""
          },
          hujiaozhuangtai:{
            status_name:"",
            error:""
          },
          keboda:true,
          log_id:"",
          logerror:false,
          cuowu:"未检测到您的账号登录手机拨号APP，请先登录手机设备后再拨打",
          jiale2:false,
          xinweixin:"",
          xiugaishangpinid:"",

          terminal:"",
          dianxinshebie:"",
          shoujishebie:"",

          chuangjiandingdanlog:false,
          chuangjiandingdanall:"",
          is_old:0,
          task_info:"",


          faguoduanxinle:false
			}
		},
		created() {
      let kaishi = moment().subtract(30, "days").format("YYYY-MM-DD HH:mm:ss");
      let jieshu = moment().format("YYYY-MM-DD HH:mm:ss");
      this.times = [kaishi,jieshu]
      console.log(this.times)
			//权限看搜索人员拨打
			var user = JSON.parse(localStorage.getItem('USER'));
			this.user_func = user.functions
			for (var i in this.user_func) {
				var func_number = this.user_func[i].code
				if (func_number.indexOf("K03") >= 0) {
					this.func_K03 = true
				}
			}

			this.url = window.location.origin
			if (JSON.parse(localStorage.getItem('CALL_OUT'))) {
				var setParams = JSON.parse(localStorage.getItem('CALL_OUT'))
			}
			// console.log(setParams);
			this.getUserIP((ip) => {
				this.setParams.ip = ip;
				if (!ip) {
					this.setParams.ip = setParams.ip
				}
			});
			this.getlist()
			this.moretagList()
			this.getflag()
			this.getwaihuren()
		},
		mounted() {
		  //获取device——id
		  axios.get("/api/plan-market/call/user/device")
		    .then(response=>{
		  	  if(response.data.msg.code == 0){
		        this.shebei = response.data.data
            if(this.shebei.list && this.shebei.list.length>0){
              this.shebei.list.forEach(item=>{
                if(item.terminal == 'cloud'){
                  this.dianxinshebie = item.device_id
                }
                if(item.terminal == 'mobile'){
                  this.shoujishebie = item.device_id
                }
              })
              console.log(this.shoujishebie,this.dianxinshebie)
            }
		  	  }else{
		  	  	this.$message.error(response.data.msg.info);
		  	  }
		    })
		  this.websocket2()
		},
    beforeDestroy() {
      this.ws = ''
    },
		methods: {
      chuangjiango:function(){
        this.chuangjiandingdanlog = false
      },
      chuangjiandingdan:function(item){
        this.chuangjiandingdanall = JSON.parse(JSON.stringify(item))
        this.chuangjiandingdanlog = true
        console.log(this.chuangjiandingdanlog)
      },


      xiugaishangpinwan:function(){
        axios.get("/api/plan-market/order/detail?order_id="+this.xiugaishangpinid)
          .then(response => {
              this.callform.my_gname = response.data.data.product_sku
              this.callform.my_gsku = response.data.data.source_sku
          });
      },
      xiugaishangpin:function(){
        this.$refs.xiugaishangpin.fixprolog = true
      },
			//获取外呼人员
			getwaihuren: function() {
				axios.get("/api/plan-market/call/permission/user")
					.then(response => {
						if (response.data.msg.code == 0) {
							this.waihuren = response.data.data
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			//标旗
			flagloggo: function() {
				axios
					.post("/api/plan-market/order/flag", {
						color: this.flagradio,
						id: this.callform.mission_id,
						memo: '拨打备注' + this.callform.remark
					})
					.then(response => {

						// this.loading = true;
						// this.flaglog = false;
						// this.getlist();
					});
			},
			//获取旗子
			getflag: function() {
				axios.get("/api/gth/shop/flag/info").then(response => {
					for (var i in response.data.data) {
						if (response.data.data[i].type == 0) {
							response.data.data[i].color = "#e4dfd7";
						}
						if (response.data.data[i].type == 1) {
							response.data.data[i].color = "#ee3f4d";
						}
						if (response.data.data[i].type == 2) {
							response.data.data[i].color = "#ebb10d";
						}
						if (response.data.data[i].type == 3) {
							response.data.data[i].color = "#229453";
						}
						if (response.data.data[i].type == 4) {
							response.data.data[i].color = "#2775b6";
						}
						if (response.data.data[i].type == 5) {
							response.data.data[i].color = "#8076a3";
						}
					}

					this.flaglist = response.data.data;
				});
			},
			//导出
			downloadTask() {
				var a = document.createElement("a");
				a.setAttribute("href", this.url +
					`/api/plan-market/my/call/details/export?task_name=${this.formInline.name}&tag=${this.formInline.tag}`);
				a.click();
			},
			//新建标签
			addTag() {
				this.showTagValue = true
				this.$nextTick(_ => {
					this.$refs.tagValue.$refs.input.focus()
				})
			},
			saveTagValue() {
				var that = this
				axios.post("/api/plan-market/call/task/tag", {
						name: this.addTagValue
					})
					.then(function(response) {
						if (response.data.msg.code == 0) {
							that.showTagValue = false
							that.addTagValue = ''
							that.moretagList()
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			//意向标签
			moretagList() {
				var that = this
				axios.get("/api/plan-market/call/tag/list")
					.then(function(response) {

						if (response.data.msg.code == 0) {
							that.tagList = response.data.data
							that.tagList.push({
								id:0,
								is_delete:1,
								name:"无意向标签",
								shop_id:50481,
								tag:0
							})
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			//修改号码
			changeMobile() {
				this.changeM = false
				this.cancall = true
				this.$nextTick(_ => {
					this.$refs.mobile.$refs.input.focus()
				})
			},
			saveMobile() {
				// if(!(/^1[3456789]\d{9}$/.test(this.callform.mobile))){
				//   this.$message.error('号码格式错误，请仔细检查~');
				//   return
				// }
				var that = this
				axios.post("/api/plan-market/call/detail/update", {
						id: this.callform.id,
						mobile: this.callform.mobile
					})
					.then(function(response) {
						if (response.data.msg.code == 0) {
							that.changeM = true
							that.cancall = false
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			//websocket服务
			websocket() {
				var that = this
				if (typeof(WebSocket) === "undefined") {
					this.$message.error("您的浏览器不支持socket")
				} else {
					// 实例化socket
					let ws_address = 'ws://' + this.setParams.ip + ':' + this.setParams.port
					var timestamp = new Date().getTime()
					var socket = new WebSocket(ws_address)
					socket.onopen = function() {
						socket.send("line=" + that.setParams.line + "number=STOPcallOutId=" + timestamp * 1000)
					}
				}
			},
			websocket1(number) {
				var that = this
				if (typeof(WebSocket) === "undefined") {
					this.$message.error("您的浏览器不支持socket")
				} else {
					// 实例化socket
					let ws_address = 'ws://' + this.setParams.ip + ':' + this.setParams.port
					var timestamp = new Date().getTime()
					var socket = new WebSocket(ws_address)
					socket.onopen = function() {
						socket.send("line=" + that.setParams.line + "number=" + number + "callOutId=" + timestamp)
						setTimeout(() => {
							that.canCall = false
							that.$message.success("外呼成功，请拿起电话~")
						}, 1500) //避免服务反应迟钝，延时一秒，可适当延长
					}
				}
			},


      tianjiaqiyehaoyou2:function(mobile,b){
        if(this.detailx.task.crowd_id == 0 && this.detailx.task.is_add_user == 1){
          axios
            .get("/api/plan-market/call/task/create/friend?crowd_user_id="+this.detailx.task.crowd_id+'&order_id='+this.callform.mission_id+'&new_mobile='+mobile+'&task_id='+this.detailx.task.id)
            .then(response => {
              this.$message.success('已发送邀请');
              this.jiale2 = b
            });
        }else{
          axios
            .get("/api/plan-market/crowd/create/friend?crowd_user_id="+this.detailx.task.crowd_id+'&order_id='+this.callform.mission_id+'&new_mobile='+mobile+'&task_id='+this.detailx.task.id)
            .then(response => {
              this.$message.success('已发送邀请');
              this.jiale2 = b
            });
        }
      },
      tianjiaqiyehaoyou:function(){
        if(this.detailx.task.crowd_id == 0 && this.detailx.task.is_add_user == 1){
          axios
            .get("/api/plan-market/call/task/create/friend?crowd_user_id="+this.detailx.task.crowd_id+'&mobile='+this.detailx.detail.mobile+'&task_id='+this.detailx.task.id)
            .then(response => {
              this.$message.success('已发送邀请');
              this.jiale = true
            });
        }else{
          axios
            .get("/api/plan-market/crowd/create/friend?crowd_user_id="+this.detailx.task.crowd_id+'&mobile='+this.detailx.detail.mobile+'&task_id='+this.detailx.task.id)
            .then(response => {
              this.$message.success('已发送邀请');
              this.jiale = true
            });
        }

      },

      websocket2() {
        var that = this
        if(typeof(WebSocket) === "undefined"){
             this.$message.error("您的浏览器不支持socket")
        }else{
          if(location.href.includes('118.190.155.55') || location.href.includes('localhost')){

            this.ws = new WebSocket("ws://118.190.155.55:8995");
          }else{
            this.ws = new WebSocket("wss://ws.91haoka.cn:8995");
          }

            //申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头
            this.ws.onopen = function(){
            　　//当WebSocket创建成功时，触发onopen事件
               console.log("open");
            }
            this.ws.onmessage = function(e){
                console.log('onmessage')
                console.log(e.data)

            　　//当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
                // JSON.parse(e.data) == 'what'  不知道干啥的回复
                if(JSON.parse(e.data) == 'what' || JSON.parse(e.data).type == '@heart@' || JSON.parse(e.data).status_name == '连接成功'  ){

                }else{
                  if(JSON.parse(e.data) == 'failed' || JSON.parse(e.data).error){
                      console.log(JSON.parse(e.data).error)
                      that.hujiaozhuangtai.status_name = ""
                  		that.cuowu = '未检测到您的账号登录手机拨号APP，请先登录手机设备后再拨打'
                      if(JSON.parse(e.data).error == '未连接'){
                        that.cuowu = JSON.parse(e.data).error
                        axios.get("/api/plan-market/call/user/device")
                          .then(response=>{
                        	  if(response.data.msg.code == 0){
                              that.shebei = response.data.data
                              if(that.shebei.list && that.shebei.list.length>0){
                                that.shebei.list.forEach(item=>{
                                  if(item.terminal == 'cloud'){
                                    that.dianxinshebie = item.device_id
                                  }
                                  if(item.terminal == 'mobile'){
                                    that.shoujishebie = item.device_id
                                  }
                                })

                              }
                        	  }else{
                        	  	that.$message.error(response.data.msg.info);
                        	  }
                          })
                      }

                      console.log('出错了')
                      that.logerror = true
                      that.keboda = true
                    }else{

                      if(JSON.parse(e.data).status_name == '已连接'){
                        that.hujiaozhuangtai = JSON.parse(e.data)
                        axios.get("/api/plan-market/call/user/device")
                          .then(response=>{
                        	  if(response.data.msg.code == 0){
                              that.shebei = response.data.data
                              if(that.shebei.list && that.shebei.list.length>0){
                                that.shebei.list.forEach(item=>{
                                  if(item.terminal == 'cloud'){
                                    that.dianxinshebie = item.device_id
                                  }
                                  if(item.terminal == 'mobile'){
                                    that.shoujishebie = item.device_id
                                  }
                                })

                              }
                        	  }else{
                        	  	that.$message.error(response.data.msg.info);
                        	  }
                          })
                      }else{
                        that.hujiaozhuangtai = JSON.parse(e.data)
                        that.keboda = false
                      }

                      // if(that.hujiaozhuangtai.status_name == '已挂断'){
                      //   that.keboda = true
                      // }
                    }
              }
            }
            this.ws.onclose = function(e){
            　　//当客户端收到服务端发送的关闭连接请求时，触发onclose事件
            　　console.log("close");
                this.ws = ""
            }
            this.ws.onerror = function(e){
                console.log('onerror')
            　　//如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
            　　console.log(error);
            }
        }
      },
      bodago:function(log_id,mobile,terminal){
        let d = ""
        if(terminal == 'mobile'){
          d = this.shoujishebie
        }
        if(terminal == 'cloud'){
          d = this.dianxinshebie
        }
        console.log(d)
        let obj = {
          type:"call_start",
          device_id:d,
          mobile:mobile,
          log_id:this.log_id,
          operation_type:"call_start",
          terminal:terminal,
		  tab:"call"
        }
        this.ws.send(JSON.stringify(obj));
      },
      guaduan:function(mobile){
        let d = ""
        if(this.terminal == 'mobile'){
          d = this.shoujishebie
        }
        if(this.terminal == 'cloud'){
          d = this.dianxinshebie
        }
        let obj = {
          type:"call_start",
          device_id:d,
          mobile:mobile,
          log_id:this.log_id,
          operation_type:"call_off",
          terminal:this.terminal,
		  tab:"call"
        }
        this.ws.send(JSON.stringify(obj));
      },


			getUserIP(onNewIP) {
				let MyPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
				let pc = new MyPeerConnection({
					iceServers: []
				});
				let noop = () => {};
				let localIPs = {};
				let ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g;
				let iterateIP = (ip) => {
					if (!localIPs[ip]) onNewIP(ip);
					localIPs[ip] = true;
				};
				pc.createDataChannel('');
				pc.createOffer().then((sdp) => {
					sdp.sdp.split('\n').forEach(function(line) {
						if (line.indexOf('candidate') < 0) return;
						line.match(ipRegex).forEach(iterateIP);
					});
					pc.setLocalDescription(sdp, noop, noop);
				}).catch((reason) => {});
				pc.onicecandidate = (ice) => {
					if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
					ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
				};
			},
			callclosed() {
				this.canCall = false
				this.startcall = false
				this.changeM = true
				this.showTagValue = false
				this.want_text = ''
				this.flagradio = 0
				this.getlist()
			},
			noPass() {
				this.flagloggo()
				this.nopass = 1
				// this.callform.tag = 0
				// this.callform.remark = ''
				this.sendForm('callform')
			},
			sendCalll() {
				this.flagloggo()
				this.sendForm('callform')
			},
			//拨打
			call(mobile,terminal){
			  console.log(terminal)
			  var that = this
			  this.keboda = false
			  this.canCall = true
			  if(terminal != 'zaici'){
			    this.terminal = terminal
			  }
			  // that.$message.warning("正在连接服务，请勿拿起电话~");
			  if(terminal != 'yidong'){
			    axios.post("/api/plan-market/call/detail/can", {id: this.callform.id,order: 1,mobile:mobile})
			      .then(function(response) {
			          if (response.data.msg.code == 0) {
			            that.log_id = response.data.data.log_id
			            that.bodago(response.data.data.log_id,mobile,that.terminal)
			          }else{
			              that.$message.error(response.data.msg.info);
			          }
			      })
			  }else{
			    axios.post("/api/plan-market/call/detail/can", {id: this.callform.id,order: 1,mobile:mobile})
			      .then(function(response) {
			          if (response.data.msg.code == 0) {
			            that.log_id = response.data.data.log_id
			          }else{
			            that.$message.error(response.data.msg.info);
			          }
			      })
			  }


			},
			//开始外呼
			startCall(item) {
				this.startcall = true
				var that = this
				setTimeout(() => {
					let audio = document.getElementsByClassName('audio');
					for (let i = 0; i < audio.length - 1; ++i) {
						audio[i].src = ''
					}
				}, 100)
        that.logs = ""
				axios.get("/api/plan-market/call/detail/info?id=" + item.id + "&order=1")
					.then(response => {
						if (response.data.msg.code == 0) {
							if (response.data.data.detail) {
								that.moretagList()
								that.callform = response.data.data.detail
                that.is_old = response.data.data.task.is_old
								that.logs = response.data.data.logs
                that.detailx = response.data.data
								for (let i in that.logs) {

																	that.logs[i].called = that.logs[i].called == 1 ? '未接通' : that.logs[i].called == 2 ? '已接通' : ''
                                  console.log(that.logs[i].called)
								if(that.logs[i].record){
								  if(that.logs[i].record.includes('https')){

								  }else{
								    if(that.logs[i].record.includes('http')){
								      that.logs[i].record.replace("http", "https")
								    }else{
								      that.logs[i].record = "https://call.91haoka.cn/" + that.logs[i].record
								    }
								  }
								}
								      console.log(that.logs[i].record)
																}
								axios.get("/api/plan-market/order/memo?id=" + that.callform.mission_id).then(response => {
									that.flagradio = response.data.data.flag;
									// that.remark = response.data.data.memo
								});
							} else {
								that.$message.success('任务外呼完毕，已经没有更多号码了^_^');
								that.startcall = false
							}
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			//开始外呼窗口 意向切换
			wantswitch(item) {
				this.callform.tag = item.id;
				// this.moretagList()
				this.want_text = item.name
			},
			sendForm(formName) {
				this.canCall = false
				this.$refs[formName].resetFields();
				// let audio = document.getElementById('audio');
				// audio.pause()
				// audio.currentTime = 0;
				this.saveCall()
				// this.startCall()
			},
			//保存
			saveCall() {
				var that = this
				let data = {}
				data.order = 1
				data.id = this.callform.id
				data.tag = this.callform.tag
				data.remark = this.callform.remark
				data.called = this.nopass
				axios.post('/api/plan-market/task/detail/tag', data)
					.then(response => {
						if (response.data.msg.code == 0) {
							that.startcall = false
							that.nopass = 2
							that.$message.success('保存成功，继续加油哦~');
							that.getlist()

              this.jiale = false
              this.jiale2 = false
              this.xinweixin = ""
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			search: function() {
				// console.log(this.formInline);
				this.page = 1
				this.getlist()
			},
			//翻页
			fanye: function(page) {
				this.loading = true
				this.page = page
				this.getlist()
			},
			//获取列表
			getlist: function() {
				var that = this
				this.loading = true
				axios.get(
						`/api/plan-market/my/call/order/details?start=${this.times[0]}&end=${this.times[1]}&userid=${this.formInline.userid}&page=${this.page}&page_size=${this.pagesize}&task_name=${this.formInline.name}&tag=${this.formInline.tag}&mobile=${this.formInline.mobile}&source=${this.formInline.source}&status=${this.formInline.status}&active_status=${this.formInline.active_status}&refund_status=${this.formInline.refund_status}&called_status=${this.formInline.called_status}&good_sku=${this.formInline.good_sku}&order_id=${this.formInline.order_id}`
					)
					.then(response => {
						if (response.data.msg.code == 0) {
							that.list = response.data.data.data
							let resultArr = ['未达成', '已达成']
							for (let i in that.list) {
								that.list[i].result = resultArr[that.list[i].result]
							}
							that.total = response.data.data.total
							that.loading = false
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
		}
	}
</script>

<style>
	.orderCallLogs .log .el-form-item {
		margin-bottom: 0;
	}
</style>
<style lang="scss" scoped="scoped">
	.orderCallLogs {
		margin: 0;
		padding: 0;
		background: #EFEFEF;

		.listupload {
			font-size: 14px;

			.li {
				flex: 1;
				line-height: 38px;
				margin-top: 20px;
			}

			.el-button--primary {
				background: #ffffff;
				color: #409EFF;
				border-color: #409EFF;
			}

		}

		.listtag {
			margin-bottom: 10px;

			.el-form-item__label {
				font-weight: bold;
			}

			.el-button--danger {
				padding: 9px 30px !important;
			}
		}

		.center {
			min-width: 1366px;width: 1366px;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;

			.right {
				flex-basis: 1366px;
				background: #ECECEC;

				.title {
					border-bottom: 1px #EAEAEA solid;
					line-height: 45px;
					padding-left: 30px;
					font-size: 16px;
					background: #F9F9F9;
					color: #727272
				}

				.topTag {
					display: flex;
					background: #fff;
					position: relative;
					border-bottom: #e2e0e3 1px solid;

					.topLogo {
						font-size: 20px;
						color: #707070;
						display: flex;
						align-items: center;
						padding: 14px 0;

						img {
							width: 30px;
							height: 30px;
							margin: 0 10px;
						}
					}
				}
			}

			.powertop {
				display: flex;
				width: 640px;
			}

			.powertopli {
				cursor: pointer;
				flex-basis: 160px;
				line-height: 45px;
				border-top: 4px #EBECEF solid;
				color: #727272;
				border-right: 1px #EAEAEA solid;
				font-size: 14px;
				text-align: center;
			}

			.powertopact {
				background: #FFFFFF;
				border-top: 4px #DD2727 solid;
			}

			.con {
				background: #FFFFFF;
				padding: 30px 40px;
				display: flex;
				justify-content: space-between;

				.conleft {
					.flex {
						display: flex;
						margin-bottom: 20px;
					}

					.gong {
						margin-right: 30px;
						color: #333
					}
				}

				.conright {
					.el-input__inner {
						line-height: 40px !important;
						height: 40px !important;
					}
				}
			}

			.conlist {
				padding: 30px;
				background: #FFFFFF;

				.flex {
					display: flex;
					justify-content: space-between
				}

				.gong {
					display: flex;

					.el-date-editor.el-input {
						width: 200px;
					}

					.el-input__inner {
						width: 250px;
					}

					.el-button--danger {
						margin-left: 20px;
					}

					.el-button--primary {
						padding: 10px 30px;
						background: #EEF7FF;
						border: 1px #EEF7FF solid;
						margin-left: 20px;
					}

					.el-date-editor--month {
						margin-right: 20px;
					}
				}

				.gl {
					margin-bottom: 20px;

					.el-input__inner {
						width: 200px;
					}

					.el-button--danger {
						margin-left: 0px !important;
						margin-right: 20px;
					}
				}

				.ml {
					.el-button--danger {
						margin-left: 10px !important;
					}
				}

				.list {
					display: flex;
					border-bottom: 1px #eaeaea solid;
					align-items: center;

					.th {
						background: #EAEAEA;
						text-align: center;
						flex: 1;
						padding: 15px 0;
						font-size: 14px;
					}

					.td {
						background: #ffffff;
						text-align: center;
						flex: 1;
						padding: 15px 0;
						font-size: 14px;
					}

					.td2 {
						flex: 1.5;

						.el-button {
							padding: 0;
						}

						.call-icon {
							width: 22px;
							cursor: pointer;
						}
					}
				}

				.el-pagination {
					text-align: right;
					margin: 20px 0
				}
			}
		}

		.formflex {
			display: flex;

			.mobile {
				color: #FB3535;
				font-size: 24px;
			}

			.valwidth {
				width: 150px;
			}

			.el-form-item__label {
				font-weight: bold;
			}

			.remarkBox {
				display: flex;
				flex-wrap: wrap;

				.el-form-item__label,
				.el-form-item__content {
					font-size: 14px;
				}

				.el-form-item__label {
					width: 80px !important;
					font-weight: normal;
				}

				.el-form-item__content {
					margin-left: 80px !important;
				}
			}

			.callbtn {
				.el-button--danger {
					padding: 14px 30px !important;
					margin-left: 20px;
				}

			}

			.intention {
				color: #727272;
			}

			.logs {
				width: 100%;
				margin: 10px 0;

				&:before,
				&:after {
					content: '';
					display: block;
					width: 100%;
					height: 1px;
					background: #D8D8D8;
				}

				.log {
					display: flex;
					justify-content: space-between;

					.ls {
						padding: 10px 0;
						width: 100%;
						font-size: 14px;

						.list {
							display: flex;
							justify-content: space-between;
							align-items: center;
							width: 100%;
							padding: 6px 0;

							.remark {
								width: 220px;
								height: 16px;
								overflow: hidden;
							}
						}

						.sucess {
							color: #51C93F;
						}

						.error {
							color: #D65757;
						}
					}

					.audioplay {
						.audio {
							height: 34px;

							&:focus {
								outline: -webkit-focus-ring-color auto 0px;
							}
						}
					}

				}
			}

			.el-input__inner {
				width: 200px;
			}

			.lineflex {
				display: flex;

				.el-button--text {
					height: 40px;
					margin-left: 20px;
				}
			}

		}

		.el-button--info {
			background: #999;
			border-color: #999;
			padding: 9px 30px;

			&:hover {
				background: #999;
				border-color: #999;
			}
		}

		.col {
			flex-direction: column;
			margin-bottom: 10px;
		}

		.formsubmit {
			justify-content: center;
			align-items: center;

			.el-button--danger {
				padding: 14px 30px !important;
				margin-left: 0;
			}

			.el-button--success {
				padding: 14px 30px !important;
				margin-left: 20px;
				margin-right: 20px;
			}

			.collection {
				display: flex;
				align-items: center;
				cursor: pointer;

				.el-icon-star-off {
					font-size: 16px
				}

				.el-icon-star-on {
					color: #FFAA00;
					font-size: 20px;
				}
			}
		}
	}
</style>
